<!DOCTYPE html>
<html>

	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="format-detection" content="telephone=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<title>快速发房源详情页</title>
		<link rel="stylesheet" type="text/css" href="../../css/reset.css" />
		<link rel="stylesheet" type="text/css" href="../../css/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../../css/source.css" />
	</head>

	<body>
		<!--弹出框开始-->
		<div class="mask_call"></div>
		<div class="make_phone">
			<p>我们已将此电话做加密处理<br />该号码仅在2分钟内拨打有效<br />超时请重新获取</p>
			<div class="make_btn row">
				<a class="make_cancel">取消</a>
				<input type="button" id="btn" value="拨打(120秒)" />
			</div>
		</div>
		<!--弹出框结束-->
		<div class="downbox row">
			<img src="../../img/icon.png" />
			<h4>【猫眼看房】汇集10000+新房渠道商，20万+经纪人</h4>
			<p>立即打开</p>
		</div>
		<!--顶部-->
		<header class="hair row">
			<a href="javascript:history.go(-1)" class="iconfont icon-arrow-left"></a>
			<div class="b-name row">
				<p>睿居地产王江</p>
				<span>案场</span>
			</div>
			<div class="b-operate row">
				<span onclick="follow(this)">关注</span>
				<a onclick="makeCall()" class="iconfont icon-dianhua"></a>
			</div>
		</header>
		<!--顶部-->
		<!--内容-->
		<div class="container pt2 pb2" style="padding-top: 4.6rem;">
			<div class="b-part-one">
				<div class="part-name row">
					<p>润城岭秀金江</p>
					<span>新房</span>
				</div>
				<div class="part-area">
					<span>三亚 | 市区</span>
				</div>
				<ul class="row">
					<li class="row">
						<div class="row">
							<h2>1房</h2>
							<p>76万起</p>
						</div>
						<span>酒店式公寓</span>
					</li>
					<li class="row">
						<div class="row">
							<h2>1房</h2>
							<p>144万起</p>
						</div>
						<span>高层住宅</span>
					</li>
					<li class="row">
						<div class="row">
							<h2>1房</h2>
							<p>144万起</p>
						</div>
						<span>洋房</span>
					</li>
					<li class="row">
						<div class="row">
							<h2>1房</h2>
							<p>144万起</p>
						</div>
						<span>别墅</span>
					</li>
				</ul>
			</div>
			<div class="b-part-two column">
				<span class="date">03月16日</span>
				<div class="part-text">
					<p>乐东不限购，华师大华府</p>
					<img src="../../img/gugu.jpg" />
				</div>
			</div>
			<div class="block4"></div>
			<div class='p-operate'>
				<div class='total row'>
					<div class='total-l row'>
						<span class='on' onclick="tab(this)">赞 18</span>
						<span onclick="tab(this)">评论 15</span>
					</div>
				</div>
				<div class='o-list'>
					<div class='o-detail'>
						<div class='detail-box'>
							<div class='detail-bottom detail-c row'>
								<img src='../../img/tx.png' class='tx'>
								<div class='detail-con'>
									<div class='con-title row'>
										<div class='column'>
											<span>幸福地产 王涛</span>
											<label>03-24 16:53</label>
										</div>
										<div class='row'>
											<i class="iconfont icon-dianzan" onclick="thumb(this)"></i>
										</div>
									</div>
									<div class='content row'>
										<div>可以按揭。不限购。</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class='o-list'>
					<div class='o-detail'>
						<div class='detail-box'>
							<div class='detail-top row detail-c'>
								<img src='../../img/tx.png' class='tx'>
								<div class='detail-con'>
									<div class='con-title row'>
										<div class='column'>
											<span>椰林湾 张霞</span>
											<label>03-24 16:53</label>
										</div>
										<div class='row'>
											<i class="iconfont icon-dianzan" onclick="thumb(this)"></i>
											<label>3</label>
										</div>
									</div>
									<div class='content row'>
										<div>可以按揭。不限购。</div>
									</div>
								</div>
							</div>
							<div class='detail-bottom detail-c row'>
								<img src='../../img/tx.png' class='tx'>
								<div class='detail-con'>
									<div class='con-title row'>
										<div class='column'>
											<span>幸福地产 王涛</span>
											<label>03-24 16:53</label>
										</div>
										<div class='row'>
											<i class="iconfont icon-dianzan" onclick="thumb(this)"></i>
										</div>
									</div>
									<div class='content row'>
										<div>回复
											<label>椰林湾 张霞</label>： 可以按揭。不限购</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class='o-detail'>
						<div class='detail-box'>
							<div class='detail-bottom detail-c row'>
								<img src='../../img/tx.png' class='tx'>
								<div class='detail-con'>
									<div class='con-title row'>
										<div class='column'>
											<span>幸福地产 王涛</span>
											<label>03-24 16:53</label>
										</div>
										<div class='row'>
											<i class="iconfont icon-dianzan" onclick="thumb(this)"></i>
										</div>
									</div>
									<div class='content row'>
										<div>可以按揭。不限购。</div>

									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class='footer row'>
			<div class='footer-edit'>
				<input type='text' placeholder='写评论'></input>
			</div>
			<div class='thumb row'>
				<i class="iconfont icon-dianzan"></i>
				<label>点赞</label>
			</div>
			<div class='thumb row'>
				<i class="iconfont icon-fenxiang"></i>
				<label>转发</label>
			</div>
		</div>
		<script src="../../js/jquery.min.js"></script>
		<script src="../../js/wap.js"></script>
		<script type="text/javascript">
			$('.o-list').hide().eq(0).show();

			function tab(e) {
				var n = $('.total span').index(e);
				$('.o-list').hide().eq(n).show();
				$('.total span').removeClass('on');
				$(e).addClass('on');
			}

			//点击关注，取消关注
			function follow(e) {
				if($(e).hasClass('on')) {
					$(e).removeClass('on');
					$(e).html('关注');
				} else {
					$(e).addClass('on');
					$(e).html('已关注');
				}
			}
			//点击点赞，取消点赞
			function thumb(e) {
				if($(e).hasClass('on')) {
					$(e).removeClass('on');
				} else {
					$(e).addClass('on');
				}
			}
			//打开弹出框
			var wait = 120;
			var timer;
			function time(o) {
				if(wait == 0) {
					o.removeAttribute("disabled");
					o.value = "已失效";
					o.style = "color:#333";
					wait = 120;
				} else { // www.jbxue.com
					o.setAttribute("disabled", true);
					o.value = "拨打(" + wait + '秒' + ")";
					o.style = "color:#ff5500";
					wait--;
					timer = setTimeout(function() {
							time(o)
						},
						1000)
				}
			}
			var odiv = document.getElementById("btn");
			function makeCall() {
				$('.mask_call').fadeIn();
				$('.make_phone').fadeIn();

				time(odiv);
			}

			//关闭弹出框
			$('.make_cancel').click(function() {
				$('.mask_call').fadeOut();
				$('.make_phone').fadeOut();
				clearTimeout(timer);
				wait = 120;
			});
		</script>
	</body>

</html>